<template>
  <div class="page-content table">
   <div class="showInfo">
     <div>{{this.showInfo}}</div>
     <div v-if="this.countInfoFlag">
       <div>近60天异常情况</div>
       <div>总异常数：{{this.countInfo.totalAbnormal}}</div>
       <div>光蛋数：{{this.countInfo.singleEgg}}</div>
       <div>未受精数：{{this.countInfo.twoUnfertilized}}</div>
       <div>踩蛋数：{{this.countInfo.twoDamaged}}</div>
       <div>臭蛋数：{{this.countInfo.twoBad}}</div>
     </div>
   </div>
   <div class="flex">
      <div>
        第<el-select v-model="form.line" placeholder="请选择" class="select shortSelect">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>排
      </div>
      <div>
        列选择区间：<el-select v-model="multi" placeholder="请选择" class="select" @change="changeMulti">
          <el-option
              v-for="item in colOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
   </div>
    <el-table :data="tableData" style="width: 100%; margin-top: 20px" border :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <el-table-column
      type="index"
      width="80"
      :index="indexMethod">
    </el-table-column>
      </el-table-column>
      <el-table-column v-for="(item, index) in data" :label="item.label" :prop="item.porp" width="120" :key="index">
        <template slot-scope="scoped">
          <el-button round @click="checkStatus(scoped.$index, index)">{{scoped.row[item.porp]}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getCageId,
  getStateByCageId,
} from "@/api/Dovecote/InfoManage/AllHouse.js";
export default {
  name: "pigeonTable",
  meta: {
    title: "鸽笼表格",
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  data() {
    return {
      data: [
        { label: "第1列", porp: "one" },
        { label: "第2列", porp: "two" },
        { label: "第3列", porp: "three" },
        { label: "第4列", porp: "four" },
        { label: "第5列", porp: "five" },
        { label: "第6列", porp: "six" },
        { label: "第7列", porp: "seven" },
        { label: "第8列", porp: "eight" },
        { label: "第9列", porp: "nine" },
        { label: "第10列", porp: "ten" },
      ],
      tableData: [],
      form: {
        baseId: +JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
        dovecoteNumber: JSON.parse(
          window.sessionStorage.getItem("CurrentDovecote")
        ).dovecoteNumber,
        rowNo: 1,
        columnNo: 1,
        line: 1,
      },
      // 位置选择框
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 },
        { label: "4", value: 4 },
        { label: "5", value: 5 },
        { label: "6", value: 6 },
        { label: "7", value: 7 },
        { label: "8", value: 8 },
        { label: "9", value: 9 },
        { label: "10", value: 10 },
        { label: "11", value: 11 },
        { label: "12", value: 12 },
      ],
      // 列选择区间
      colOptions: [
        { label: "1~10列", value: 0 },
        { label: "11~20列", value: 1 },
        { label: "21~30列", value: 2 },
        { label: "31~40列", value: 3 },
        { label: "41~50列", value: 4 },
        { label: "51~60列", value: 5 },
        { label: "61~70列", value: 6 },
      ],
      multi: 0,
      showInfo: "未选择鸽笼",
      countInfo: {},
      countInfoFlag: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.tableData = [];
      for (let i = 1; i <= 10; i++) {
        let obj = {};
        obj.one = `A${i}${this.multi === 0 ? "0" + 1 : this.multi * 10 + 1}`;
        obj.two = `A${i}${this.multi === 0 ? "0" + 2 : this.multi * 10 + 2}`;
        obj.three = `A${i}${this.multi === 0 ? "0" + 3 : this.multi * 10 + 3}`;
        obj.four = `A${i}${this.multi === 0 ? "0" + 4 : this.multi * 10 + 4}`;
        obj.five = `A${i}${this.multi === 0 ? "0" + 5 : this.multi * 10 + 5}`;
        obj.six = `A${i}${this.multi === 0 ? "0" + 6 : this.multi * 10 + 6}`;
        obj.seven = `A${i}${this.multi === 0 ? "0" + 7 : this.multi * 10 + 7}`;
        obj.eight = `A${i}${this.multi === 0 ? "0" + 8 : this.multi * 10 + 8}`;
        obj.nine = `A${i}${this.multi === 0 ? "0" + 9 : this.multi * 10 + 9}`;
        obj.ten = `A${i}${this.multi === 0 ? "10" : (this.multi + 1) * 10}`;
        this.tableData.push(obj);
      }
    },
    indexMethod(index) {
      return "第" + (index + 1) + "行";
    },
    changeMulti(e) {
      this.multi = e;
      for (let i = 0; i < this.data.length; i++) {
        this.data[i].label = `第${e * 10 + i + 1}列`;
      }
      this.init();
    },
    async checkStatus(row, col) {
      this.form.rowNo = row + 1;
      this.form.columnNo = this.multi * 10 + col + 1;
      this.countInfo = {};
      this.countInfoFlag = false;
      await getCageId(this.form).then(async (res) => {
        if (res.data.statusCode === 20000) {
          if (res.data.data === null) {
            this.showInfo = `当前选择：第${this.form.line}排${this.form.rowNo}行${this.form.columnNo}列鸽笼, 暂无该鸽笼的状态信息`;
          } else {
            await getStateByCageId(res.data.data).then((res2) => {
              if (res2.data.statusCode === 20000) {
                this.showInfo = `当前选择：第${this.form.line}排${this.form.rowNo}行${this.form.columnNo}列鸽笼,`;
                const state = res2.data.data.state;
                if (state === 1) {
                  this.showInfo += `即将照蛋。`;
                } else if (state === 2) {
                  this.showInfo += `即将抽蛋。`;
                } else if (state === 3) {
                  this.showInfo += `当前已抽蛋。`;
                } else if (state === 4) {
                  this.showInfo += `当前已照蛋。`;
                } else {
                  this.showInfo += `查仔发现当前存在${res2.data.data.abnormal[0]}个臭蛋，${res2.data.data.abnormal[1]}个仔。`;
                }
                this.countInfo = res2.data.data;
                this.countInfoFlag = true;
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.table /deep/ .el-table__body-wrapper {
  height: 450px; /* 滚动条整体高 必须项 */
  border-right: none;
  overflow-y: scroll; /* overflow-y为了不出现水平滚动条*/
}

#app /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px !important; /* 滚动条的宽高 必须项 */
  height: 5px !important;
}

#app /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #bfcbd9; /* 滚动条的宽 */
  border-radius: 3px;
}
.showInfo {
  background: #aaa;
  padding: 20px;
  color: #fff;
  border-radius: 5px;
}
.select {
  width: 170px;
  margin-top: 20px;
}
.shortSelect {
  width: 80px;
}
</style>